<template>
 <div>
   <LbtForm :options="options" :data="mockData"></LbtForm>
 </div>
</template>

<script setup>
import {ref} from 'vue'
import LbtForm from './dynamic-form/form.vue'
import {FormMateEnum} from "./dynamic-form/type.ts";
import dayjs from 'dayjs'
import {flattenObject} from "../utils/index.ts";
const options=ref({
  inputAlign:'left',
  labelAlign:'top',
  inset:true,
  border:false,
  // column:{},
  groups:[
    {
      title:'寄件人信息',
      column:[
        {
            prop:'personInfo.name',
            label:'寄件人姓名',
            type:FormMateEnum.field,
              props:{
                  rules:[{
                    required: true,
                    message: '请填写寄件人姓名'
                  }]
              }
          },
        {
          prop:'personInfo.phone',
          label:'寄件人电话',
          type:FormMateEnum.field,
          props:{
            rules:[{
              required: true,
              message: '请填写寄件人电话'
            }]
          }
        },
        {
          prop:'personInfo.sigleSelect',
          label:'单列选择',
          type:FormMateEnum.picker,
          props:{
            isLink:true,
            readonly:true,
            rules:[{
              required: true,
              message: '请填写寄件人电话'
            }]
          },
          picker:{
            columns :[
              { text: '杭州', value: 'Hangzhou', disabled: true },
              { text: '宁波', value: 'Ningbo' },
              { text: '温州', value: 'Wenzhou' },
            ]
          }
        },
        {
          prop:'personInfo.address',
          label:'寄件人地址',
          type:FormMateEnum.field,
          props:{

          },
        },
        {
          prop:'personInfo.time',
          label:'寄出日期',
          type:FormMateEnum.datePicker,
          props:{
            columnsType:['year', 'month','day'],
            placeholder:'请选择寄出日期',
            isLink:true,
            readonly:true,
          },
        },
        {
          prop:'personInfo.timeRange',
          label:'上门取件时间段',
          type:FormMateEnum.dateRangePicker,
          props:{
            columnsType:['year', 'month','day'],
            placeholder:'请选择上门取件时间段',
            isLink:true,
            readonly:true,
          },
          picker:{
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 5, 1),
          }
        }
      ]
    },
    {
      title:'收件信息',
      column:[
        {
          prop:'delivery.name',
          label:'收货人姓名',
          type:FormMateEnum.field,
          props:{
            rules:[{
              required: true,
              message: '请填写收件人姓名'
            }]
          }
        },
        {
          prop:'delivery.phone',
          label:'收货人电话',
          type:FormMateEnum.field,
          props:{
            rules:[{
              required: true,
              message: '请填写收件人电话'
            }]
          }
        },
        {
          prop:'delivery.address',
          label:'收货人地址',
          type:FormMateEnum.field,
          props:{

          },
        },
      ]
    },
    {
      title:'交易须知',
      column:[
          {
            prop:'agreement.disclaimer',
            label:'免责声明',
            type:FormMateEnum.field,
            props:{

            }
         },
        {
          prop:'agreement.returnandExchage',
          label:'退换货声明',
          type:FormMateEnum.field,
          props:{

          }
        },
      ]
    }
  ],
})
const mockData=ref(flattenObject({
  id:'mock00001',
  personInfo:{
    name:'张三',
    phone:'15123231122',
    address:'上海市静安区文鸽宛',
    time:'2024-12-20'
  },
  delivery:{
    name:'李四',
    phone:'18085251623',
    address:'上海市长宁区长乐路'
  },
  agreement:{
    disclaimer:'概不负责',
    returnandExchage:'7天可退换'
  }
}))
</script>

<style scoped lang="scss"></style>
